<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<h1 align="center" style="padding-top: 100px"><strong>外卖订餐系统</strong></h1>
<div class="layui-container" style="width: 500px;height: 320px;margin-top: 20px;border: 1px solid #009688;padding-top: 60px;border-radius: 15px">
    <form class="layui-form" id="loginFrm" style="margin-left: 50px">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-inline">
                <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-inline">
                <input type="password" name="password" lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">身份：</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="user" title="用户" checked="">
                <input type="radio" name="status" value="admin" title="管理员">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" id="submitBtn" lay-submit="" lay-filter="login" style="margin-left: 140px;width: 100px">登陆</button>
        </div>
    </form>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'element','jquery'], function(){
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;

        //自定义验证规则
        form.verify({
            password: [/(.+){6,12}$/, '密码必须6到12位']
        });

        //监听提交
        form.on('submit(login)', function(data){
            var loginFrm=$('#loginFrm').serialize();
            $.post('/accountApi/login',loginFrm,function (res) {

                if(res.code==200&&res.data=="user"){

                    //登入成功的提示与跳转
                    layer.msg('登录成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        location.href = 'index.html';
                    });
                }if(res.code==200&&res.data=="admin"){

                    //登入成功的提示与跳转
                    layer.msg('登录成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        location.href = 'main.html';
                    });
                }else if(res.code==500){
                    layer.msg(res.data, {icon: 5,anim: 6});
                }else if(res.code==404){
                    layer.msg(res.data, {icon: 5,anim: 6});
                }else if(res.code==405){
                    layer.msg(res.data, {icon: 5,anim: 6});
                }

                // $('#submitBtn').text('提交');
            })
            return false;
        })
    });
</script>
</body>
</html>